<!-- 设备管理-设备档案管理-设备备件清单详情页面 -->
<template>
  <div v-if="!isMain && isView" class="view-equip-detail-wrap">
    <px-scrollbar class="view-equip-detail">
      <div style="display: flex; align-items: center; justify-content: space-between; margin: 16px 0 24px">
        <px-button type="primary" icon="ArrowLeft" @click="backMainPage">返回</px-button>
      </div>
      <div class="view-equip-title">设备信息</div>
      <div class="view-equip-wrap">
        <div class="view-equip-content">
          <div class="view-equip-item half">
            <div class="label">备件清单名称</div>
            <div class="text">{{ formValue?.inventoryName || "-" }}</div>
          </div>
          <div class="view-equip-item half">
            <div class="label">科室</div>
            <div class="text">{{ formValue?.classNameDesc || "-" }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item half">
            <div class="label">设备总称</div>
            <div class="text">{{ formValue.categoryName || "-" }}</div>
          </div>
          <div class="view-equip-item half">
            <div class="label">设备类型</div>
            <div class="text">{{ formValue?.typeName || "-" }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item plus">
            <div class="label">设备型号</div>
            <div class="text">{{ formValue?.modelName || "-" }}</div>
          </div>
        </div>
      </div>
      <div class="view-equip-title">设备清单</div>
      <px-table :data="formValue.eqpTable" style="margin-bottom: 32px" class="equip-table" size="small" height="240" border>
        <px-table-column type="index" label="序号" width="60" align="center" fixed="left" />
        <px-table-column
          v-for="(item, index) in eqpTableColumns"
          :key="index"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template #default="scope">
            {{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}
          </template>
        </px-table-column>
      </px-table>
      <div class="view-equip-title">关联备品备件</div>
      <div class="view-equip-title">备品备件厂内型号</div>
      <px-table :data="formValue.specTable" style="margin-bottom: 32px" class="equip-table" size="small" height="240" border>
        <px-table-column type="index" label="序号" width="60" align="center" fixed="left" />
        <px-table-column
          v-for="(item, index) in specTableColumns"
          :key="index"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template #default="scope">
            {{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}
          </template>
        </px-table-column>
      </px-table>
      <div class="view-equip-title">当前备品备件清单预览</div>
      <px-table :data="formValue.previewTable" style="margin-bottom: 32px" class="equip-table" size="small" height="240" border>
        <px-table-column type="index" label="序号" width="60" align="center" fixed="left" />
        <px-table-column
          v-for="(item, index) in previewTableColumns"
          :key="index"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template #default="scope">
            {{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}
          </template>
        </px-table-column>
      </px-table>
    </px-scrollbar>
  </div>
</template>
<script setup lang="ts">
import { reactive, toRefs, watch, computed } from "vue";
import { getSpareParts, getSparePartsModelCodesNew } from "@/api/equip/archive";

// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["backMainPage"]);
// 父级传过来的值
const props = defineProps(["isMain", "isView", "id"]);
// 显示隐藏
const isMain = computed(() => props.isMain);
const isView = computed(() => props.isView);
// 页面本身的值
const state = reactive<any>({
  formValue: {
    eqpTable: [],
    specTable: [],
    previewTable: []
  },
  eqpTableColumns: [
    { prop: "eqpId", label: "设备编号", minWidth: "140", showOverflowTooltip: true },
    { prop: "eqpName", label: "设备名称", minWidth: "140", showOverflowTooltip: true },
    { prop: "systemNameAll", label: "系统", minWidth: "140", showOverflowTooltip: true },
    { prop: "categoryName", label: "设备总称", minWidth: "140", showOverflowTooltip: true },
    { prop: "typeName", label: "设备类型", minWidth: "140", showOverflowTooltip: true },
    { prop: "modelName", label: "设备型号", minWidth: "140", showOverflowTooltip: true }
  ],
  specTableColumns: [
    { prop: "typeName", label: "类型", minWidth: "160", showOverflowTooltip: true },
    { prop: "model", label: "厂内型号", minWidth: "160", showOverflowTooltip: true }
  ],
  previewTableColumns: [
    { prop: "categoryDesc", label: "种类", minWidth: "140", showOverflowTooltip: true },
    { prop: "sparePartName", label: "名称", minWidth: "140", showOverflowTooltip: true },
    { prop: "sparePartCode", label: "编码", minWidth: "140", showOverflowTooltip: true },
    { prop: "typeName", label: "类型", minWidth: "140", showOverflowTooltip: true },
    { prop: "brandName", label: "品牌", minWidth: "140", showOverflowTooltip: true },
    { prop: "supplyModel", label: "厂商型号", minWidth: "140", showOverflowTooltip: true },
    { prop: "model", label: "厂内型号", minWidth: "140", showOverflowTooltip: true },
    { prop: "warehousePositionDesc", label: "库位", minWidth: "140", showOverflowTooltip: true }
  ]
});
const { formValue, eqpTableColumns, specTableColumns, previewTableColumns } = toRefs(state);

// 监视isMain和isView值
watch(isMain, val => {
  if (!val && props.isView) {
    getDetail();
  } else {
    formValue.value = {
      eqpTable: [],
      specTable: [],
      previewTable: []
    };
  }
});
// 获取详情
const getDetail = async () => {
  const data = await getSpareParts(props.id);
  formValue.value = data;
  formValue.value.eqpTable = data?.equipmentInfoDTOList || [];
  formValue.value.specTable = data?.sparePartTypeDTOList || [];
  const arr = [];
  if (formValue.value.specTable && formValue.value.specTable.length > 0) {
    formValue.value.specTable.forEach(item => {
      arr.push(item.code);
    });
    const previewTable = await getSparePartsModelCodesNew(arr);
    formValue.value.previewTable = previewTable || [];
  } else {
    formValue.value.previewTable = [];
  }
};
// 返回主页面
const backMainPage = () => {
  emits("backMainPage");
};
</script>
<style lang="scss" scoped>
@import url("@/views/all/equip/scss/view-detail.scss");
</style>
